<template>
    <div>
        <el-form :model="addSubject">

           
           <el-form-item label="年级" :label-width="formLabelWidth">
               <el-select v-model="addSubject.grade" placeholder="请选择" clearable>
                 <el-option
                   v-for="item in grad"
                   :value="item.dictValue" 
                   :key="item.dictValue"             
                   :label="item.dictLabel">
                 </el-option>
               </el-select>              
           </el-form-item>

           <el-form-item label="学科" :label-width="formLabelWidth">
               <el-select v-model="addSubject.subject" placeholder="请选择" clearable @change="tree">
                 <el-option                 
                   v-for="item in findData"
                   :value="item.id" 
                   :key="item.id"             
                   :label="item.subject"
                   
                   >
                 </el-option >
               </el-select>              
           </el-form-item>


           
            <el-form-item prop="subject" label="知识点树" :label-width="formLabelWidth">
               <el-tree
                 :data="treeList"
                 show-checkbox
                 node-key="id"
                 default-expand-all
                 :expand-on-click-node="false"
                 >
                 <span class="custom-tree-node" slot-scope="{ node, data }">
                   <span>{{ node.label }}</span>
                   <span>
                     <el-button class="mmm"
                       type="text"
                       size="mini"
                       @click="() => append(data)">
                       添加
                     </el-button>
                     <el-button class="mmm"
                       type="text"
                       size="mini"
                       @click="() => remove(node, data)">
                       删除
                     </el-button>
                   </span>
                 </span>
               </el-tree>              
             </el-form-item>
             <el-form-item>
                 <el-button type="primary" @click="genGist">添加根节点</el-button>
                 <el-button>取消</el-button>
             </el-form-item>
           </el-form>

           <!-- 弹框 -->
           <el-dialog title="添加知识点" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
               <el-form ref="form" :model="tankuang" label-width="80px">
                    <el-row>
                       <el-col :span="24">
                           <el-form-item label="知识点">
                               <el-input v-model="tankuang.pointName"></el-input>
                           </el-form-item>
                       </el-col>
                   </el-row>
               </el-form>
               <span slot="footer" class="dialog-footer">
                   <el-button @click="dialogVisible = false">取 消</el-button>
                   <el-button type="primary" @click="ziaddGist(tankuang)">确 定</el-button>
               </span>
           </el-dialog>
          
    </div>
</template>

<script>
import axios from 'axios';
export default {
    data(){
        return{
            id:'',
            grad:[],

            pageNum:1,
            pageSize:2,
            formLabelWidth: '120px', //新增表单宽度
            addSubject:{
                "grade": "",         
                "subject": "",
                subjectId:''
            },
            treeList:[],
            findData:[],
            //弹框
            dialogVisible: false,
            tankuang: {
              parentId:'',
              subjectId:'',
               pointName:'',
            },
            subjectId:''
           

        }
    },
    created(){
        this.id = sessionStorage.getItem("id")
        console.log(this.id);
        this.searchDict()

        if(sessionStorage.getItem("id")){
            this.initGetAdminById()
            
        }
        this.initTable()

    },
    methods:{
      //树
      //添加子节点弹框
      append(data) {
          this.tankuang = {}
          this.dialogVisible = true
          console.log(data)
          this.tankuang.parentId = data.id
          this.tankuang.subjectId = this.subjectId
          console.log( this.tankuang);
          
      },

      //添加根节点弹框
      genGist() {
          this.tankuang = {}
          this.dialogVisible = true
          // console.log(data)
          this.tankuang.parentId = 0,
          this.tankuang.subjectId = this.subjectId
      },

      //删除子节点
      remove(data) {
          console.log('id',data.data.id)
          axios.delete("/api/pointTree/deletePointTree?pointId=" + data.data.id)
          .then(res => {
              //弹框
               this.$message({
                    message: res.data.message,
                    type: 'success'
                  });
                  this.Tree()//刷新表格
                  this.dialogVisible=false
              })         
      },

      //添加节点
      ziaddGist() {
          axios.post("/api/pointTree/addPointTree", this.tankuang)
          .then(res => {
              //弹框
               this.$message({
                    message: res.data.message,
                    type: 'success'
                  });
                  this.Tree()//刷新表格
                  this.dialogVisible=false
              })                   
          
      }, 
      //取消弹框
      handleClose() {
            this.dialogVisible = false;
        },    

       

     

        //查询
        initTable(){
            axios.post("/api/subject/findSubjectPaginationList?pageNum=" + this.pageNum + "&pageSize=" +this.pageSize,{})
                .then(res=>{
                    this.findData = res.data.data.items
                })
        },

        //回显
        initGetAdminById(){
            axios.get("/api/subject/findSubjectById?id="+this.id).then(res=>{
                this.addSubject = res.data.data
                console.log(this.addSubject);

                this.TRee()
                
                sessionStorage.removeItem("id")
                
            })

        },

      //判断树
      tree(val){
            this.subjectId = val
            console.log(val);
              this.Tree()
           

          },

        //树
        Tree(){
            axios.post("/api/pointTree/findPointTreeList?subjectId="+this.subjectId,{}).then(res=>{
                //弹框
                this.treeList = res.data.data
            })
        },

        //数学树
         TRee(){
            axios.post("/api/pointTree/findPointTreeList?subjectId="+this.addSubject.subjectId,{}).then(res=>{
                //弹框
                this.treeList = res.data.data
                console.log(this.treeList);
            })
        },
      

       //查询字典数据的性别
       searchDict(){
         
          axios.get("/api/dict/findDictDataByDictTypeIdSysUserSex?dictType=sys_grade_status").then(res=>{
            this.grad =res.data.data
          })

        },
        //重置
        adminNull(){
            this.addadmin ={}
        }

    }
    
}
</script>

<style scoped>

</style>